<template>
  <!-- 库存统计 -->
  <div id="echarts6"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  props:['barData'],
  data() {
    return {
      myChart1: null,
      xData: ["11-11","11-12",'11-13','11-14','11-15','11-16','11-17','11-18','11-19','11-20','11-21','11-22','11-23','11-24','11-25'],
      joinShopNums:[222,250,260,180,190,210,222,762,421,622,522,811,422,300,100],
      chatNums:[322,232,244,123,122,233,444,555,222,333,144,654,233,222,23],
      lineData:[322,232,244,123,122,233,444,555,222,333,144,654,233,222,23]
    };
  },
  watch:{
    // barData:{
    //   handler(newVal){
    //     this.xData = newVal.xData
    //     this.yData = newVal.yData
    //     this.initCharts1();
    //   },
    //   deep:true,
    //   immediate:true
    // }
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      var chartDom = document.getElementById("echarts6");
      this.myChart1 = echarts.init(chartDom);
      // var priceChartDom =  document.getElementById('echarts2');
      // this.myChart2 =  echarts.init(priceChartDom);
      this.initCharts1();
      // this.initCharts2()
    });
  },
  methods: {
    initCharts1() {
      const labelOption = {
        show: false,
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        // color:'#ffffff',
        rich: {
          name: {
            color: '#ffffff'
          }
        }
      };
      let option = {
        title:{
          show:false,
          text:'回收订单统计',
          
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // color:['#e5d62b','#e8972d','#2ddde8','#3eb54f'],
        color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 1, color: '#188df0' }
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f5d183' },
          { offset: 1, color: '#cc900f' }
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#aff5f9' },
          { offset: 1, color: '#2ddde8' }
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#9bf8a8' },
          { offset: 1, color: '#3eb54f' }
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f391f9' },
          { offset: 1, color: '#dd28e8' }
        ])],
        legend: {
          data: ['进店人数', '咨询人数','回复率'],
          right:"30px",
          top:'0'
        },
        grid:{
          left:"50",
          right:'60',
          top:'80'

        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   left: 'right',
        //   top: 'center',
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // dataZoom: [
        //   {
        //     id: 'dataZoomX',
        //     type: 'slider',
        //     xAxisIndex: [0],
        //     filterMode: 'filter',
        //     endValue: 10,
        //     maxValueSpan:20
        //   },
        // ],
        xAxis: [
          {
            name: '日期',
            type: 'category',
            axisTick: { show: false },
            data: this.xData
          }
        ],
        yAxis: [
          {
            name: '人数',
            type: 'value'
          }
        ],
        series: [
          {
            name: '进店人数',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },

            data: this.joinShopNums
          },
          {
            name: '咨询人数',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.chatNums
          },
          // lineData
          {
            name: '回复率',
            type: 'line',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.lineData
          }
        ]
      };
      option && this.myChart1.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
#echarts6 {
  width: 100%;
  height: 100%;
}
</style>
